<template>
    <div id="box">
        <div class="registerHead">
            注册
        </div>
        <div class="registerContainer">
              <div>
                  <el-popover
                          placement="bottom-end"
                          ref="popover1"
                          title=""
                          width="200"
                          trigger="focus"
                          content="输入您的用户名，长度应在6~20位">
                  </el-popover>
                  <el-input
                          placeholder="请输入用户名"
                          v-model="nick"
                          clearable
                          ref="username"
                          v-popover:popover1>
                  </el-input>
              </div>

           <div>
               <el-input v-popover:popover2 placeholder="请输入密码" v-model="password" show-password>
               </el-input>
               <el-popover
                       placement="bottom-end"
                       ref="popover2"
                       title=""
                       width="200"
                       trigger="focus"
                       content="请输入密码">
               </el-popover>
           </div>
            <div>
                <el-input v-popover:popover3 placeholder="请再次输入密码" v-model="password1" show-password>
                </el-input>
                <el-popover
                        placement="bottom-end"
                        ref="popover3"
                        title=""
                        width="200"
                        trigger="focus"
                        content="再次输入您的密码">
                </el-popover>
            </div>
            <div>
                <el-input
                        placeholder="请输入手机号"
                        v-model="phone"
                        v-popover:popover4
                        clearable>
                </el-input>

                <el-popover
                        placement="bottom-end"
                        ref="popover4"
                        title=""
                        width="200"
                        trigger="focus"
                        content="输入您的手机号">
                </el-popover>
            </div>
            <div class="btn">
                <el-button :plain="true" @click="validation" type="primary" icon="el-icon-check" circle></el-button>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                nick:'',
                password:'',
                password1:'',
                phone:''
            };
        },
        methods: {
            register(callback){
                let params = {
                    nick:this.nick,
                    password:this.password,
                    phone:this.phone
                }
                this.$axios({
                    url:'/user/register',
                    data:params,
                    method:'post'
                }).then(result=>{
                    callback(result)
                })
            },
            open(){
                this.$confirm('注册成功, 是否去登录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // this.$message({
                    //     type: 'success',
                    //     message: '登录成功!'
                    // });
                    this.$emit('regSuc')
                }).catch(() => {

                });
            },
            validation(){
                if(this.username!='' && this.password!='' && this.password1!='' && this.phone !=''){
                    if(this.nick.length<6){
                        this.$message.error('帐号长度小于6位！')
                    }else{
                        if(this.password === this.password1 ){
                            if(!(/^1[3456789]\d{9}$/.test(this.phone))){
                                this.$message.error('手机号码格式有问题')
                            }else{
                                this.register((result)=>{
                                    const status = result.data.status;
                                    if(status==1){
                                        return this.$message.error('用户名已存在')
                                    }

                                    this.$message.success('注册成功')
                                    this.open()
                                })
                            }
                        }else{
                            this.$message.error('两次输入的密码不一致！')
                        }

                    }

                }else{
                    this.$message.error('请输入完整的信息')
                }
            }
        },
    };
</script>

<style lang="less" scoped>
    #box{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .btn{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .el-button{
        margin-top: 20px;
        width: 100px;
        height: 100px;
        font-size: 50px;
    }
    .registerContainer{
        width: 95%;
        display: flex;
        flex-direction: column;
    }
</style>